<template>
  <div class="ln_container">
    <nav>
      <RouterLink v-for="item in menu" :to="item.path">{{ item.name }}</RouterLink>
    </nav>
    <div class="ln_main">
      <RouterView />
    </div>
  </div>
</template>

<script setup lang="ts">
import { RouterLink, RouterView,useRouter } from 'vue-router';
import { ref, onMounted,watch } from 'vue';

const menu = ref([
  {
    name: '首页',
    path: '/',
  },
  {
    name: 'vue01',
    path: '/home/vue01',
  }, {
    name: 'vue02',
    path: '/home/vue02',
  },
]);

const router = useRouter();
// 监听路由变化，如果跳转到/home,则跳转到/home/homeLayout
watch(() => router.currentRoute.value.path, (to) => {
  if (to === '/home') {
    router.push('/home/homeLayout');
  }
}, { immediate: true });

</script>

<style scoped lang="scss">
.ln_container {
  width: 100%;
  height: 100%;
  nav {
    display: flex;
    padding: 10px;
    font-size: 16px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 10px;
    a {
      display: inline-block;
      padding: 10px;
      line-height: 20px;
      text-decoration: none;
      color: #333333;
      &:hover{
        background-color: #f0f0f0;
      }
    }
  }
}

nav a:first-of-type {
  border: 0;
}

.ln_main {
  padding: 10px;
}
</style>
